<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title>首页</title>
		 <link rel="stylesheet" href="Font-Awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="style/index.css" />
	</head>

	<body>
		<footer class="footerNav">
			<ul class="clearfix">
				<li 
					v-for="(item,key,index) in footerNav"
					@click="addClassFun(index)" 
					:class='{active:index==qwerqwre}'>
					<a><i v-bind:class="item.font" ></i></br>{{item.nav}} </a>
				</li>
			</ul>
			<ul class="clearfix">
				<li 
					v-for="(k,index) in nav"
					@click="lastFun(index)"
					:class='{red:index==subscript}'>
					<a>
						<i :class='k.font'></i>
						</br>{{k.nav1}}
					</a>
				</li>
			</ul>
		</footer>
	</body>
	<script src="js/vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: ".footerNav",
			data: {
				footerNav: {
					foot1:{
						nav: '首页',
						font: 'icon-home'
					},
					
					foot2:{
						nav: '发现',
						font: 'icon-eye-open'
					},
					foot3:{
						nav: '购物车',
						font: 'icon-shopping-cart'
					},
					foot4:{
						nav: '我的',
						font: 'icon-user'
					}
				},
				nav:[
					{
						nav1:'首页',
						font: 'icon-home'
					},
					{
						nav1:'发现',
						font: 'icon-eye-open'
					},
					{
						nav1:'购物车',
						font: 'icon-shopping-cart'
					},
					{
						nav1:'我的',
						font: 'icon-user'
					}
				],
				qwerqwre: "0",
				subscript:'3'
			},
			methods:{
				addClassFun: function(index) {
					this.qwerqwre = index;
				},
				lastFun:function(index){
					this.subscript = index;
					
				}
			}
		})
	</script>

</html>